<template>
  <Modal title="编辑页面信息" :value="showModal" :footer-hide="true" @on-cancel="closeModal">
    <Form ref="JForm" :model="formData" :rules="rules">
      <FormItem label="id">
        <Input :disabled="true" :value="pageId"></Input>
      </FormItem>
      <FormItem prop="name" label="页面名称">
        <Input v-model="formData.name" placeholder="请输入页面名称"></Input>
      </FormItem>
      <FormItem prop="pid" label="父级页面">
        <Select v-model="formData.pid" placeholder="请选择父级页面(如为一级页面亲故选择“无”)" :filterable="true" :clearable="true">
          <Option :value="0">无</Option>
          <Option v-for="item in pageInfo" :value="item.id" :key="item.id">
            {{ item.name }}
          </Option>
        </Select>
      </FormItem>
      <FormItem prop="path" label="页面路径">
        <Input v-model="formData.path" placeholder="请输入页面路径(格式：/XXX)"></Input>
        <Button type="primary" @click="toChangePage">修改</Button>
      </FormItem>
    </Form>
  </Modal>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    pageId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      formData: {
        name: '',
        pid: '',
        path: '',
      },
      pageInfo: [],  // 页面列表，用于选择父级页面的时候用
      rules: {
        name: [
          {
            required: true,
            message: '页面名称不能为空',
            trigger: 'blur'
          }
        ],
        pid: [
          {
            required: true,
            message: '父级页面不能为空',
            trigger: 'change',
            type: "number"
          }
        ],
        path: [
          {
            required: true,
            message: '页面路径不能为空',
            trigger: 'blur'
          }
        ],
      }
    }
  },
  watch: {
    'showModal' () {
      this._getMenu()
    }
  },
  mounted () {
    this._getMenuInfo()
  },
  methods: {
    // 修改页面数据
    toChangePage () {
      this.$refs.JForm.validate((valid) => {
        if (valid) {
          this._changePageInfo()
          this.closeModal
          this.$emit("reload")
        }
      })
    },
    closeModal () {
      this.formData = {
        name: '',
        pid: '',
        path: ''
      }
      this.$emit('closeModal')
    },
    // 获取页面列表
    async _getMenuInfo () {
      const url = 'menuinfo'
      const res = await this.GET_DATA({
        dataUrl: url,
        isAll: 1
      })
      if (res) {
        this.pageInfo = res.data.menuList
      }
    },
    // 获取当前页面信息
    async _getMenu () {
      const url = 'getmenu'
      const res = await this.GET_DATA({
        dataUrl: url,
        pageId: this.pageId
      })
      if (res) {
        this.formData.id = res.data.id
        this.formData.name = res.data.name
        this.formData.pid = parseInt(res.data.pid)
        this.formData.path = res.data.path
      }
    },
    // 修改页面信息接口
    async _changePageInfo () {
      const url = 'editmenu'
      const actionsUser = this.$store.state.userModule.user.username
      const res = await this.GET_DATA({
        dataUrl: url,
        actionsUser: actionsUser,
        ...this.formData
      })
      if (res) {
        res.code === '0000' && this.$Message.success('操作成功')
      }
    },
    ...mapActions({
      GET_DATA: 'GET_DATA'
    })
  }
}
</script>